<template>
	<view class="flea">
		<view class="head">
			<view class="red-bg"></view>
			<view class="fillet"></view>
		</view>
		<view class="container">
			<view class="chunk" :style="{height:chunkHeight + 'px'}"></view>
			<view class="title" id="title" :class="{active:titleFlag}" :style="{paddingTop:titleTop + 'px'}">
				官方质检 安心租机
			</view>
			<view class="banner">
				<view class="left-banner">
					<image class="title-icon" src="@/static/flea/title-icon.png"></image>
					<view class="ensure">
						<view class="item">
							<image class="check-icon" src="@/static/flea/check-circle-filled.png"></image>
							<text>48h发货</text>
						</view>
						<view class="item">
							<image class="check-icon" src="@/static/flea/check-circle-filled.png"></image>
							<text>顺丰包邮</text>
						</view>
						<view class="item">
							<image class="check-icon" src="@/static/flea/check-circle-filled.png"></image>
							<text>租期质保</text>
						</view>
					</view>
				</view>
				<view class="right-banner">
					<image class="shield" src="@/static/flea/shield.png"></image>
				</view>
			</view>
			<view class="ranking-list">
				<image class="ranking" src="@/static/flea/ranking-list.png"></image>
				<view class="ranking-data">
					<view class="item" v-for="(item,index) in hotData" :key="index" @click="handleGoodsDetail(item)">
						<image v-if="index === 0" class="arrange" src="@/static/flea/first.png"></image>
						<image v-if="index === 1" class="arrange" src="@/static/flea/second.png"></image>
						<image v-if="index === 2" class="arrange" src="@/static/flea/third.png"></image>
						<image class="img" :src="getImg(item.imgurl)" :lazy-load="true"></image>
						<view class="detail">
							<image class="scratch" src="@/static/flea/scratch.png"></image>
							{{item.extension_title}}
						</view>
						<view class="price">
							￥{{item.min_price}}/天
						</view>
					</view>
				</view>
			</view>
			<view class="recommend-list">
				<image class="recommend" src="@/static/flea/recommend.png"></image>
				<dataList :dataList="recommendList"></dataList>
			</view>
			<view class="two-col">
				<view class="two-head">
					<view class="item" v-for="(item,index) in twoHeadData" :key="item.id"
						:class="{active:activeNum === index}" @click="handleActiveNum(index,item.id)">
						{{item.name}}
					</view>
				</view>
				<dataList :dataList="twoListData"></dataList>
			</view>
		</view>
		<view class="footer">
			<image class="img" src="@/static/flea/footer.png"></image>
		</view>
	</view>
</template>

<script>
	import dataList from "@/components/flea/dataList.vue"
	export default {
		data() {
			return {
				activeNum: 0,
				titleTop: 0,
				chunkHeight: 0,
				titleFlag: false,
				hotData: [],
				recommendList: [],
				twoHeadData: [],
				twoListData: [],
			};
		},
		components: {
			dataList,
		},
		onLoad() {
			this.getMenu();
			this.getTwoHeadData();
			this.getKeyNameData(8, "hotData");
			this.getKeyNameData(9, "recommendList");
			this.getKeyNameData(10, "twoListData");
		},
		methods: {
			getTwoHeadData() {
				uni.$http.get('/Alipay/Index/categoryList2')
					.then(res => {
						this.twoHeadData.push(...res.data.data.splice(2))
					})
			},
			getKeyNameData(id, keyName) {
				const params = {
					cateId: id,
					page: 1,
					sort: "desc",
					orderby_name: "id",
				}

				uni.$http.get('/Wechat/Index/indexList', params)
					.then(res => {
						this[keyName].push(...res.data.data.data)
					})
			},
			handleGoodsDetail(item) {
				uni.navigateTo({
					url: `/pagesA/category/goods/productDetails/productDetails?id=${ item.goods_id }`
				})
			},
			getImg(url) {
				return getApp().globalData.baseImg + url;
			},
			handleActiveNum(index, id) {
				this.activeNum = index;

				this.twoListData.splice(0);
				this.getKeyNameData(id, "twoListData");
			},
			getMenu() {
				const menuInfo = uni.getMenuButtonBoundingClientRect();
				this.titleTop = menuInfo.top;
				this.chunkHeight = menuInfo.top + menuInfo.height + 10;
			}
		},
		onPageScroll(event) {
			this.titleFlag = event.scrollTop > 10 ? true : false;
		}
	}
</script>

<style lang="scss">
	.flea {
		min-height: 100vh;
		width: 100vw;
		overflow: hidden;
		background-color: white;

		.head {
			height: 1006rpx;
			width: 750rpx;
			overflow: hidden;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;

			.red-bg {
				height: 750rpx;
				background-color: #EB2D2B;
			}

			.fillet {
				margin-top: -1px;
				width: 1000rpx;
				height: 256rpx;
				transform: translateX(-62.5px);
				background: linear-gradient(180deg, #EB2D2B 10%, #FBBEBE 100%);
				border-bottom-left-radius: 50%;
				border-bottom-right-radius: 50%;
			}
		}

		.container {
			position: relative;
			z-index: 2;
			padding: 0 24rpx;
			box-sizing: border-box;

			.title {
				font-size: 36rpx;
				font-weight: bold;
				color: white;
				line-height: 72rpx;
				position: fixed;
				width: 100vw;
				top: 0;
				left: 0;
				padding: 0 24rpx;
				box-sizing: border-box;
				z-index: 1000;
				transition: all .5s;

				&.active {
					background-color: white;
					color: black;
				}
			}

			.banner {
				position: relative;
				height: 284rpx;
				box-sizing: border-box;

				.left-banner {
					padding-top: 48rpx;

					.title-icon {
						width: 392rpx;
						height: 144rpx;
					}

					.ensure {
						display: flex;
						color: white;
						margin-top: 30rpx;
						font-size: 24rpx;

						.item {
							margin-right: 16rpx;
							display: flex;
							align-items: center;

							.check-icon {
								width: 28rpx;
								height: 28rpx;
								margin-right: 8rpx;
							}
						}
					}
				}

				.right-banner {
					position: absolute;
					right: -40rpx;
					top: 0;

					.shield {
						width: 296rpx;
						height: 364rpx;
					}
				}
			}

			.ranking-list {
				.ranking {
					width: 222rpx;
					height: 48rpx;
					margin-bottom: 16rpx;
				}

				.ranking-data {
					width: 702rpx;
					overflow: scroll;
					height: 282rpx;
					display: flex;

					.item {
						flex-shrink: 0;
						width: 192rpx;
						height: 282rpx;
						box-sizing: border-box;
						border-radius: 8rpx;
						overflow: hidden;
						border: 6rpx solid #F6ECEC;
						background-color: white;
						padding: 16rpx;
						padding-top: 0;
						margin-right: 16rpx;
						position: relative;

						&:last-of-type {
							margin-right: 0;
						}

						.arrange {
							position: absolute;
							width: 35.62rpx;
							height: 54.09rpx;
							top: 10rpx;
							left: 10rpx;
						}

						.img {
							width: 152rpx;
							height: 152rpx;
						}

						.detail {
							height: 50rpx;
							font-size: 24rpx;
							-webkit-line-clamp: 2;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							overflow: hidden;
							line-height: 24rpx;

							.scratch {
								width: 40rpx;
								height: 24rpx;
								margin-right: 6rpx;
							}
						}

						.price {
							margin-top: 12rpx;
							width: 148rpx;
							height: 42rpx;
							border-radius: 12rpx;
							font-size: 24rpx;
							color: white;
							text-align: center;
							line-height: 42rpx;
							background-image: linear-gradient(to bottom, #FA9660, #F5211C);
						}
					}
				}
			}

			.recommend-list {
				width: 702rpx;
				padding: 24rpx 16rpx;
				background-color: #FFE5E4;
				border-radius: 16rpx;
				margin-top: 24rpx;
				padding-bottom: 16rpx;
				box-sizing: border-box;

				.recommend {
					width: 178rpx;
					height: 48rpx;
					margin-bottom: 16rpx;
				}
			}

			.two-col {
				margin-top: 24rpx;
				padding: 24rpx 16rpx;
				border-radius: 16rpx;
				background-color: #FFE5E4;
				width: 702rpx;
				box-sizing: border-box;

				.two-head {
					display: flex;
					// justify-content: space-between;
					align-items: center;
					margin-bottom: 24rpx;

					.item {
						color: #898989;
						font-size: 28rpx;
						margin-right: 20rpx;

						&.active {
							color: #FF2704;
							font-size: 32rpx;
							font-weight: bold;
						}
					}
				}
			}

		}

		.footer {
			.img {
				width: 750rpx;
				height: 498rpx;
			}
		}
	}
</style>
